<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息修改</title>
    <!--<link rel="stylesheet" href="../../layui/css/layui.css">-->
    <style type="text/css">
        .div1{
            width: 300px
        }
    </style>
</head>
<body>
<div style="padding:10px;background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">我的工作台/个人资料修改</div>
                <div class="layui-card-body">
                    <div style="padding-left: 5%" class="layui-form">
                        <form class="layui-form layui-form-pane" action="" id="myform" method="post">
                            <div class="layui-form-item div1" >
                                <label class="layui-form-label">用户账号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="user_account" lay-verify="required | user_account" autocomplete="off" placeholder="请输入用户账号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">用户名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="user_name" lay-verify="required|user_name" autocomplete="off" placeholder="请输入标题" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">旧密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="old_pwd" lay-verify="old_pwd" autocomplete="off" placeholder="请输入旧密码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="new_pwd" lay-verify="new_pwd"  placeholder="请输入新密码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="user_pwd" lay-verify="user_pwd" autocomplete="off" placeholder="再次输入新密码" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性&nbsp;&nbsp;别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="男" title="男" checked="">
                                    <input type="radio" name="sex" value="女" title="女">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input type="text" name="user_age" lay-verify="required|user_age" autocomplete="off" placeholder="请输入年龄" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">入职日期</label>
                                <div class="layui-input-block">
                                    <input type="text" name="entry_time" class="layui-input" id="entry_time">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">离职日期</label>
                                <div class="layui-input-block">
                                    <input type="text" name="quit_time" class="layui-input"  id="quit_time">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">联系电话</label>
                                <div class="layui-input-block">
                                    <input type="text" name="user_tel" lay-verify="required|user_tel" autocomplete="off" placeholder="请输入电话" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item div1">
                                <label class="layui-form-label">电子邮箱</label>
                                <div class="layui-input-block">
                                    <input type="text" name="user_email" lay-verify="required|user_email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                            <button type="button" lay-filter="demo1" lay-submit="demo1" style="margin-left: 300px;margin-top: 20px" class="layui-btn">提交修改</button>
                            </div>
                        </form>
                    </div>
                    </div>
            </div>
        </div>
    </div>
</div>
</body>
<!--<script rel="stylesheet" src="../../js/jquery-3.4.1.js"></script>-->
<!--<script rel="stylesheet" src="../../layui/layui.js"></script>-->
<!--<script rel="stylesheet" src="../../layui/layui.all.js"></script>-->
<script>
    layui.use(['laydate','form','layer'], function(){
        var laydate = layui.laydate;
        var form = layui.form
            ,layer = layui.layer;
        form.render();
        //执行一个laydate实例
        //自定义验证规则
        form.verify({
            old_pwd: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ],
            // new_pwd: [
            //     /^[\S]{6,12}$/
            //     ,'密码必须6到12位，且不能出现空格'
            // ],
            // user_pwd: [
            //     /^[\S]{6,12}$/
            //     ,'密码必须6到12位，且不能出现空格'
            // ],
            user_age: [
                /^[0-9]*$/
                ,'年龄必须是纯数字'
            ],
            user_tel: [
                /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                ,'号码格式不正确'
            ],
            user_email: [
                /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                ,'邮箱格式不正确'
            ]
        });

        laydate.render({
            elem: '#entry_time' //指定元素
        });
        laydate.render({
            elem: '#quit_time' //指定元素
        });



        var user=JSON.parse(sessionStorage.getItem("users"));

        $("input[name=user_account]").val(user[0].user_account);
        $("input[name=user_name]").val(user[0].user_name);
        $("input[name=user_age]").val(user[0].age);
        $("input[name=entry_time]").val(user[0].in_time);
        $("input[name=user_tel]").val(user[0].user_phone);
        $("input[name=user_email]").val(user[0].user_email);


            $("input[name=user_account]").attr("disabled",true);
            $("input[name=user_name]").attr("disabled",true);
            $("input[name=entry_time]").attr("disabled",true);
            $("input[name=quit_time]").attr("disabled",true);

        var flag=true;
        var flag1=true;
        $(function () {
            //先判断旧密码有没有输入
            $("input[name=old_pwd]").blur(function () {
                var old_pwd=$("input[name=old_pwd]").val();
                var user_account=$("input[name=user_account]").val();
                if (old_pwd ==""){
                layer.msg("不能为空",{icon:5});
                }else {
                $.ajax({
                    url:"/findpwd.do",
                    type:"post",
                    data:{old_pwd:old_pwd,user_account:user_account},
                    dataType:"json",
                    success:function (res) {
                        //密码不正确
                        if (res.code == 500 ){
                            layer.msg(res.msg,{icon:5});
                            flag=false;
                        }else {
                            flag=true;
                        }
                    }
                })
                }
            });

            $("input[name=user_pwd]").blur(function () {
                var old_pwd=$("input[name=old_pwd]").val();
                var new_pwd=$("input[name=new_pwd]").val();
                var user_pwd=$("input[name=user_pwd]").val();
                if (new_pwd != user_pwd){
                    layer.msg("两次输入的密码不正确",{icon:5});
                    flag1=false;
                }else if(user_pwd == old_pwd){
                    layer.msg("新密码不能和旧密码相同",{icon:5});
                    flag1=false;
                }else {
                    flag1=true;
                }
            });
        });

        form.on('submit(demo1)', function(data){
            var user_pwd=$("input[name=user_pwd]").val();
            if (user_pwd =="") {
                data.field.user_pwd=data.field.old_pwd;
            }
           if (flag) {
               if (flag1) {
                   $.ajax({
                       url:"/updateUser.do",
                       type:"post",
                       data:JSON.stringify(data.field),
                       dataType:"json",
                       success:function (res) {
                           if (res.code == 200) {//成功
                               layer.msg(res.msg,{icon:1});
                               form.reload('myform', {
                                   where: {
                                       key: {
                                           time: new Date()
                                       }
                                   }
                               }, 'data');
                           }if (res.code == 500){//失败
                               layer.msg(res.msg,{icon:5});
                           }
                       }
                   });
               }else {
                   layer.msg("两次输入的密码不正确",{icon:5});
               }
           }else {
               layer.msg("旧密码不正确",{icon:5});
           }
        });

     });

</script>
</html>